<template>
  <h3>
    直接经费:
  </h3>
  <el-table
    v-loading="loading"
    ref="multipleTableRefZ"
    row-key="budgetItemId"
    :data="DirectFundingList"
    style="width: 100%"
    @selection-change="handleSelectionChangeZ"
    title="直接经费"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="budgetItemId" label="科目编号" />
    <el-table-column property="budgetitemName" label="科目名称" />
  </el-table>
  <br /><br /><br /><br />
  <h3>间接经费:</h3>
  <el-table
    v-loading="loading"
    ref="multipleTableRefJ"
    row-key="budgetItemId"
    :data="IndirectCostsList"
    style="width: 100%"
    @selection-change="handleSelectionChangeJ"
    title="间接经费"
  >
    <el-table-column type="selection" width="55" /><el-table-column
      property="budgetItemId"
      label="科目编号"
    />
    <el-table-column property="budgetitemName" label="科目名称" />
  </el-table>

    <el-button  type="primary" text bg @click="Submit" style="float: right">
      <h2>保存</h2>
    </el-button>

</template>
  
  <script  setup>
import { inject, nextTick, onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage, ElTable } from "element-plus";
import { useRouter } from "vue-router";
import http from "../../../api/http";

const router = useRouter();

//需要被选中的科目
const NeedToSelect = ref(null);
const multipleTableRefZ = ref(null);
const multipleTableRefJ = ref(null);

const multipleSelectionZ = ref([]);
const multipleSelectionJ = ref([]);

const RelationshipIdZ = ref(null);
const RelationshipIdJ = ref(null);

const loading = ref(true);

let { DirectFundingList, IndirectCostsList } = toRefs(
  reactive({
    DirectFundingList: [],
    IndirectCostsList: [],
  })
);
onMounted(() => {
  loading.value = true;
  http
    .get(
      "/api/Tb_Project_Templatesubject_Relationship/GetBudgeSubject?fundtemplateId=" +
        /* router.currentRoute.value.query.id */localStorage.Fundingid
    )
    .then((res) => {
      console.log(res.data)
      //所有直接经费科目
      DirectFundingList.value = res.data.directFunding;
      //所有间接经费科目
      IndirectCostsList.value = res.data.indirectCosts;
      //直接经费关系表ID
      RelationshipIdZ.value = res.data.relationshipIdZ;
      //间接经费关系表ID
      RelationshipIdJ.value = res.data.relationshipIdJ;
      //console.log(RelationshipId.value)
      NeedToSelect.value = res.data.project_Fundtemplate_Dto;
      //console.log(NeedToSelect);
      let NeedToSelectZ = [];
      let NeedToSelectJ = [];
      NeedToSelect.value.map((i) => {
        // multipleTableRefZ.value.toggleRowSelection(i, true);
        DirectFundingList.value.map((j) => {
          if (i.budgetItemId === j.budgetItemId) {
            NeedToSelectZ.push(j);
            //console.log(j);
          }
        });
        IndirectCostsList.value.map((j) => {
          if (i.budgetItemId === j.budgetItemId) {
            NeedToSelectJ.push(j);
            //console.log(j);
          }
        });
      });

       console.log(NeedToSelectZ, NeedToSelectJ);
      nextTick(() => {
        NeedToSelectZ.map((row) => {
          console.log(row)
          multipleTableRefZ.value.toggleRowSelection(row, true);
          rowChildrenZ(row);
        });
        NeedToSelectJ.map((row) => {
          multipleTableRefJ.value.toggleRowSelection(row, true);
          rowChildrenJ(row);
        });
      });
      loading.value = false;
    });
});
const rowChildrenZ = (row) => {
  if (row.children) {
    NeedToSelect.value.map((x) => {
      row.children.map((rows) => {
        if (x.budgetItemId === rows.budgetItemId) {
          multipleTableRefZ.value.toggleRowSelection(rows, true);
        }
      });
    });
    rowChildrenZ(row.children);
  }
};
const rowChildrenJ = (row) => {
  if (row.children) {
    NeedToSelect.value.map((x) => {
      row.children.map((rows) => {
        if (x.budgetItemId === rows.budgetItemId) {
          multipleTableRefJ.value.toggleRowSelection(rows, true);
        }
      });
    });
    rowChildrenJ(row.children);
  }
};
const handleSelectionChangeZ = (val) => {
  multipleSelectionZ.value = val;
  // for (let index = 0; index < array.length; index++) {
  //   const element = array[index];
  //   if(val.partentId!="0"){
  //     DirectFundingList.value.map((x)=>{
  //       if(x.children.partentId==val.partentId)
  //       {
  //         console.log(x)
  //         multipleTableRefZ.value.toggleRowSelection(x.children, true);
  //       }
  //     })
  //     console.log(val)
  //   }
  //   console.log(multipleSelectionZ.value);
  // }
};
const handleSelectionChangeJ = (val) => {
  multipleSelectionJ.value = val;
  //console.log(multipleSelectionJ.value);
};

const Submit = () => {
  let UpdateDto = [];
  let UpdatetoZ = {
    fundtemplateId: localStorage.Fundingid,
    supportingBudgetTypeId: true,
    Id: RelationshipIdZ.value,
    supportingBudgetId: multipleSelectionZ.value
      .map((x) => x.budgetItemId)
      .toString(),
  };
  let UpdatetoJ = {
    fundtemplateId: localStorage.Fundingid/* router.currentRoute.value.query.id */,
    supportingBudgetTypeId: false,
    Id: RelationshipIdJ.value,
    supportingBudgetId: multipleSelectionJ.value
      .map((x) => x.budgetItemId)
      .toString(),
  };
  UpdateDto.push(UpdatetoZ);
  UpdateDto.push(UpdatetoJ);
  console.log(UpdateDto);
  http
    .post(
      "/api/Tb_Project_Templatesubject_Relationship/UpdateTemplateSubjectItemsAsync",
      UpdateDto
    )
    .then((res) => {
      console.log(res);
      if (res.status) {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        /* this.$emit("aaaa"); */
        /* router.push("/FundingTemplate"); */
      } else {
        ElMessage.error("保存失败");
      }
    });
};
</script>

<style>
.ipt .el-input__inner {
  border: 0;
  outline: none;
}

.ipt {
  border-bottom: 1px #ccc solid;
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}

.indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: scale(0.5);
}

.indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #f2f6fc;
  border-color: #dcdfe6;
}

.indeterminate .el-checkbox__input .el-checkbox__inner::after {
  border-color: #c0c4cc !important;
  background-color: #c0c4cc;
}
</style>
